<template>
	<view class="page">

		<image class="topbg" src="@/static/home/bgtop.png"></image>
		<view class="top">
			<view class="name">{{carlist.nickName}}</view>
			<view>{{carlist.firmName}}</view>
		</view>
		<view class="addcar bg" @click="goBack">
			<view class="addcar-detail">
				<view>车辆概览</view>
				<u-icon name="more-dot-fill"></u-icon>
			</view>
			<view class="addcar-content">
				<view>
					<view class="addcar-name">全部车辆</view>
					<view style="font-size: 32rpx;">{{all}}</view>
				</view>
				<view>
					<view class="addcar-name">保养/维修</view>
					<view style="font-size: 32rpx;">{{listtop.unService}}</view>
				</view>
				<!-- 				<view>
					<view class="addcar-name">救援</view>
					<view style="font-size: 32rpx;">200</view>
				</view> -->
				<view>
					<view class="addcar-name">营运中</view>
					<view style="font-size: 32rpx;">{{listtop.service}}</view>
				</view>

			</view>
		</view>

		<view class="bg order">
			<view class="order-name">维修记录查询</view>
			<view class="list">
				<u-row customStyle="margin-bottom: 10rpx" justify-content:="flex-start">
<!-- 					<u-col span="3">
						<view class="col" @click="goBack('/bundle/pages/maintenancerecords/maintenancerecords')">
							<image src="/static/home/cx.png"></image>
							<view class="writing">维修记录</view>
						</view>
					</u-col> -->
					<u-col span="4">
						<view class="col" @click="goBack('/bundle/pages/maintenancerecords/maintenancerecords')">
							<image src="/static/home/o.png"></image>
							<view class="writing">维保记录</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="col" @click="goBack('/bundle/pages/orderreview/orderreview')">
							<image src="/static/home/or.png"></image>
							<view class="writing">订单审核</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="col" @click="goBack('/bundle/pages/vehiclemanagement/vehiclemanagement')">
							<image src="../../static/home/hcar.png"></image>
							<view class="writing">车辆信息</view>
						</view>
					</u-col>
					</u-row>
			</view>
		</view>
		<view class="consume">
			<view class="consume-top">
				<view class="consume-name">消费概览</view>
				<view style="display: flex;" @click="show = true">
					<view class="consume-data">{{timename}}</view>
					<u-icon name="arrow-down" color="#1677FF"></u-icon>
				</view>
			</view>
			<view class="list">
				<u-row customStyle="margin-bottom: 10rpx" justify-content:="flex-start">
					<u-col span="6">
						<view class="image-text_8">
							<image class="icon_7" referrerpolicy="no-referrer"
								src="/static/home/mon.png" />
							<view class="text-group_19">
								<view class="text_4">总支出</view>
								<view class="text_5">{{allconsume||0}}</view>
							</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="image-text_8">
							<image class="icon_7" referrerpolicy="no-referrer"
								src="/static/home/cw.png" />
							<view class="text-group_19">
								<view class="text_4">保养订单</view>
								<view class="text_5">{{consume.byOrderPay||0}}</view>
							</view>
						</view>
					</u-col>
				</u-row>
				<u-row customStyle="margin-bottom: 10rpx" justify-content:="flex-start">
					<u-col span="6">
						<view class="image-text_8">
							<image class="icon_7" referrerpolicy="no-referrer"
								src="/static/home/cx.png" />
							<view class="text-group_19">
								<view class="text_4">维修订单</view>
								<view class="text_5">{{consume.wxOrderPay||0}}</view>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="ech">
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
			</view>

		</view>
		<view style="margin-top:100rpx; visibility: hidden;">1</view>
		  <u-picker :show="show" :columns="[list]" keyName="name" @confirm="selectClick"></u-picker>
	<!-- 	<u-action-sheet @select="selectClick" :closeOnClickOverlay="true" :safeAreaInsetBottom="true" :actions="list"
			:show="show"></u-action-sheet> -->

	</view>
</template>

<script>
	import {
		apitgetById,
		apigetGraphList,
		apigetAllPriceByStatusByTimeType
	} from "@/api/app.js"
	import {
		apigetAllCarByStatus
	} from '@/api/car.js'
	export default {
		data() {
			return {
				timename: "本月支出",
				timeType:0,
				consume: {},
				allconsume: 0,
				timeid: 2,
				all: 0,
				listtop: {},
				chartData: {},
				carlist: {},
				opts: {
					color: ["#5AD8A6", "#5D7092"],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					legend: {
						show: true,
						position: "top",
						lineHeight: 25
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				value1: 0,
				form: {
					name: '哈哈哈'
				},
				title: '标题',
				list: [{
						name: '本月支出',
						id: 0
					},
					{
						name: '本年支出',
						id: 1
					}
				],
				show: false,
				car: {},
				id:0
			}
		},
	
		created() {
			 let home=uni.getStorageSync("type")
			if(home!=2){
			this.getById()
			}
		},
		methods: {

			selectClick(e) {
				this.show = false
				this.timename = e.value[0].name
				this.timetype = e.value[0].id
				this.getAllPriceByStatusByTimeType()
			},
			homes() {
				wx.switchTab({
					url: "/pages/home/home"
				})
			},
			my() {
				wx.switchTab({
					url: "/pages/my/my"
				})
			},
			getGraphList(id) {
				apigetGraphList({
					number: 3,
					businessId: id
				}).then((res) => {
					let list = {
						categories: [],
						series: [{
								name: "保养订单",
								data: []
							},
							{
								name: "维修订单",
								data: []
							}
						]
					};
					res.data.forEach((item, index) => {
						list.categories.push(item.time)
						list.series[0].data.push(item.byOrderPayOut)
						list.series[1].data.push(item.wxOrderPayOut)
					})
					console.log(res)

					this.chartData = JSON.parse(JSON.stringify(list));

					console.log(res)
				})
			},
			getCarManagerPage(id) {
				console.log(id)
				let params = {
					enterpriseId: id
				}
				apigetAllCarByStatus(params).then((res) => {
					this.all = Number(res.data.service) + Number(res.data.unService)
					this.listtop = res.data
				})
			},
			getAllPriceByStatusByTimeType() {
				let params = {
					timeType: this.timeid,
					businessId: this.id,
					timeType:this.timeType
				}
				apigetAllPriceByStatusByTimeType(params).then((res) => {
					this.allconsume = Number(res.data.byOrderPay) + Number(res.data.wxOrderPay)
					this.allconsume = this.allconsume.toFixed(2)
					this.consume = res.data
				
				})
			},
			getById() {
				let id = uni.getStorageSync('userId')
				apitgetById(id).then((res) => {
					this.carlist = res.data
					 this.id=res.data.businessId
					this.getGraphList(res.data.businessId)
					this.getCarManagerPage(res.data.businessId)
					this.getAllPriceByStatusByTimeType(res.data.businessId)
				  uni.setStorageSync("businessId", res.data.businessId)
					uni.setStorageSync('caruser', res.data)
				})
			},
			goBack(url) {
				console.log(url, 66666)
				uni.navigateTo({
					url: url
				})
			},
	

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		background-color: #FFFEF4;


		.topbg {
			z-index: -1;
			position: absolute;
			top: 0;
			width: 100vw;
			height: 424rpx;
		}

		.top {
			padding: 140rpx 40rpx;
			font-size: 28rpx;

			.name {
				font-size: 44rpx;
				font-weight: 600;
				margin-bottom: 6rpx;
			}
		}

		.bg {
			box-shadow: 0px 4rpx 8rpx 0px rgba(225, 225, 225, 0.44);
			background: linear-gradient(#FFF3CE 0%, #fff 100%);
		}

		.addcar {
			position: absolute;
			width: 718rpx;
			height: 180rpx;
			margin: -80rpx 16rpx 10rpx 16rpx;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			.addcar-detail {
				margin-top: 10rpx;
				@include flex(row, space-between, center) font-size: 32rpx;
				font-weight: 600;
			}

			.addcar-content {
				margin-top: 20rpx;
				text-align: center;
				@include flex(row, space-between, center) font-size: 30rpx;
				font-weight: 600;

				view {
					line-height: 50rpx;
					width: 150rpx;
				}

				.addcar-name {
					font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}

	.order {
		margin: 130rpx 16rpx 20rpx 16rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		height: 280rpx;

		.order-name {
			font-size: 32rpx;
			font-weight: 600;
		}

		.list {
			margin-top: 18rpx;
			display: flex;
			flex-wrap: wrap;

			.col {
				margin: 18rpx 30rpx 0rpx 20rpx;
				margin-top: 18rpx;
				width: 120rpx;
				text-align: center;

				image {
					width: 88rpx;
					height: 88rpx;

				}

				.writing {
					margin-top: 10rpx;
					font-size: 28rpx;

				}
			}
		}
	}

	.ech {
		margin-top: 20rpx;
		width: 716rpx;
		height: 480rpx;
		margin-left: -38rpx;
		z-index: -1 !important;

	}

	.consume {

		box-shadow: 0px 4rpx 8rpx 0px rgba(225, 225, 225, 0.44);
		margin: 40rpx 16rpx 20rpx 16rpx;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		// height: 280rpx;
		background-color: #ffffff;

		.consume-name {
			font-size: 32rpx;
			font-weight: 600;
		}

		.consume-top {
			@include flex(row, space-between, center) margin-bottom: 20rpx;
		}

		.consume-data {
			font-size: 28rpx;
			color: #1677FF;
		}
	}

	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.image-text_8 {
		display: flex;
		background-color: #F8FAFB;
		border-radius: 6px;
		width: 260rpx;
		height: 100rpx;
		margin: 10rpx 8rpx 8rpx 0;
		padding: 30rpx 62rpx 7rpx 20rpx;

	}

	.image-text_8:nth-child(2n) {
		margin-right: 0;
	}

	.image-text_8:nth-last-child(-n + 2) {
		margin-bottom: 0;
	}

	.icon_7 {
		width: 80rpx;
		height: 80rpx;
		margin: 0rpx 0 10rpx 0;
	}

	.text-group_19 {
		margin-left: 24rpx;
	}

	.text_4 {
		width: 48rpx;
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 30rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 28rpx;
	}

	.text_5 {
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-weight: 500;
		text-align: left;
		font-weight: 600;
		line-height: 44rpx;
		margin: 8rpx 14rpx 0 0;
	}

	::v-deep .u-slide-up-enter-active {
		bottom: 100rpx !important;
	}
</style>